<script type="text/x-template" id="policy-config-form">
    <div>
        <div class="action-list">
            <div style="padding: 10px;">
                 <span class="spform J-selected J_select" v-if="selectedConfig">
                     (当前选择的模板: <span style="color: red">{{ selectedConfig.configName }})</span>
                 </span>
                <span class="spform J-selected J_select" v-else>
                     (当前选择的模板: <span style="color: green">本地模板)</span>
                 </span>
                <el-button type="info" @click="selectConfigStart">
                    选择模板
                </el-button>
                <el-button type="primary" @click="handleEditStart">
                    新增模板
                </el-button>
            </div>
        </div>
        <config-selector-dialog
                v-if="showConfigSelect"
                ref="configSelector"
                @select-cancel="handleConfigSelectCancel"
                @select-end="handleConfigSelectEnd"
        />
        <config-template-dialog v-if="showConfigAdd"
                             @cancel="handleEditEnd"
        />
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>配置模板Json信息</span>
            </div>
            <pre class="json">{{ jsonString }}</pre>
        </el-card>
    </div>
</script>

<script>
    Vue.component('policy-config-form', {
        template: '#policy-config-form',
        data() {
            return {
                showConfigAdd: false,
                selectedConfig: undefined,
                showConfigSelect: false,
                rules: {
                    keyvalData: [
                        {required: true, message: '请输入要转化的key:val'}
                    ]
                },
                jsonString: '',
            }
        },
        props: ['data'],
        computed: {},
        methods: {
            selectConfigStart() {
                this.showConfigSelect = true
            },
            handleConfigSelectCancel() {
                this.showConfigSelect = false
            },
            handleConfigSelectEnd(data) {
                this.selectedConfig = data[0]
                this.doConfigTemplateUpdate()
                this.showConfigSelect = false

            },
            doConfigTemplateUpdate() {
                let configJsonStr = this.selectedConfig.configJson
                if (configJsonStr) {
                    const configJson = JSON.parse(configJsonStr)
                    this.$set(this.data, 'strategyConfig', configJson.strategyConfig)
                    this.$set(this.data, 'tableConfigList', configJson.tableConfigList)
                } else {
                    this.$set(this.data, 'strategyConfig', {})
                    this.$set(this.data, 'tableConfigList', [])
                }
                this.updateJsonString()
            },
            handleEditStart() {
                this.showConfigAdd = true;
            },
            handleEditEnd() {
                this.showConfigAdd = false;
            },
            updateJsonString() {
                let json = {};
                json.tableConfigList = this.data.tableConfigList
                json.strategyConfig = this.data.strategyConfig
                this.jsonString = JSON.stringify(json, null, 2).trim();
            }
        },
        watch: {},
        mounted() {

        },
        created() {
            this.updateJsonString()
        }
    })
</script>
<style scoped>
    .json {
        text-align: left;
    }
</style>
